Icon List

Icon List — Default

  • Icon List Alt Unlinked Title

    This list item has this short description and an unlinked title.

  • Icon List Alt Linked Title

    This list item has this short description and a linked title.

  • Icon List Alt Title Only

  • This list item has this short description and no title.

Icon List — Condensed

  • Icon List Alt Unlinked Title

  • Icon List Alt Linked Title

  • Icon List Alt Title Only

  • This list item has this short description and no title.

Icon List — Borders

  • Icon List Alt Unlinked Title

    This list item has this short description and an unlinked title.

  • Icon List Alt Linked Title

    This list item has this short description and a linked title.

  • Icon List Alt Title Only

  • This list item has this short description and no title.

HTML

<ul class="icon-list">
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p class="icon-list-item-content-title">Icon List Alt Unlinked Title</p>
            <p>This list item has this short description and an unlinked title.</p>
        </div>
    </li>
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p class="icon-list-item-content-title"><a href="#">Icon List Alt Linked Title</a></p>
            <p>This list item has this short description and a linked title.</p>
        </div>
    </li>
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p class="icon-list-item-content-title">Icon List Alt Title Only</p>            
        </div>
    </li>
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p>This list item has this short description and no title.</p>
        </div>
    </li>                
</ul>

Problem Being Solved

We need a way to display a list using our icons to draw attention or add emphasis.

When to Use

It can be used if list content would be enhanced by icons

When Not to Use

  • It should not be used to display non-list content or large amounts of text.
  • Do not use this in an edge-to-edge section element.

Formatting

  • This pattern should only be used in the regular or full-width section elements (never edge-to-edge).
  • For bordered icon list items, add the class "bordered" to the UL element with the class "icon-list."
  • The icon list title should have the class "icon-list-item-content-title."
    • Additionally, you can add the class "h3" to achieve a header-like style (see uses in project EVOLVE).